<template>
  <el-container :direction="vertical" class="bg fixed">
    <!-- elcon 快速生成页面模板 -->
    <el-header height="70px">
      <div class="logo">
        <img src="" alt="">
      </div>
      <h1>盛邦山桥项目考试管理系统注册页</h1>
    </el-header>
    <el-container :direction="horizontal" class="content">
      <el-main class="content-body">
        <!-- el 快速生成表单 -->
        <el-form
          class="margin-top-20"
          :model="form"
          ref="form"
          :rules="rules"
          label-width="120px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="userpassword">
            <el-input v-model="form.userpassword" type="password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btn">立即登录</el-button>
              <router-link to="/register" class="float-right">注册</router-link>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>
    <el-footer height="60px">
      <div class="slogan">
        <span>-</span>
        <span>学好硬本领 赢在软实力</span>
        <span>-</span>
      </div>
    </el-footer>

  </el-container>

</template>

<script>
import { setItem } from "@/utils/storage.js"
export default {
  data() {
    return {
      vertical: "vertical",
      horizontal: "horizontal",
      // 判断两次输入的密码是否一致 控制提示文字是否显示 不一致时显示 初始不显示
      isEqualPassword: true,
      // 重复输入的密码
      repeatPassword: "",
      // 提交的表单数据 form
      form: {
        username: "",
        userpassword: "",
      },
      // 正则验证使用的规则 验证 form 中的 数据
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名"},
        ],
        userpassword: [
          { required: true, trigger: "blur", message: "请输入密码" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      // 创建表单对象
      const formData = new FormData();
      // 将this.form 中的数据添加到表单对象中
      for(let key in this.form) {
        // 使用append(key,value)方法向表单中添加数据
        formData.append(key, this.form[key]);
      }
      // 提交数据
      this.$axios({
        url: "/system/sqUserlogin/userLogin",
        method: "post",
        data: formData
      }).then(res => {
        // 成功
        if (res.data.code === 1) {
          // 登录成功
          alert(res.data.msg)
            // 设置本地存储
            setItem("userInfo",res.data.data.userInfo);
            setItem("userRole", res.data.data.userRoleInfo[0]);
            setItem("token",res.data.data.Token);
            // 保存信息到 vueX 中的 userInfo 解决不能同步刷新的问题
            this.$store.commit("userInfoMutation", res.data.data.userInfo);
            this.$store.commit("userRoleMutation", res.data.data.userRoleInfo[0])
            // 登录成功跳转至首页
            this.$router.push("/")
            return;
          }
          // 登录失败
          alert(res.data.msg)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
  .bg {
    background-image: url("../../assets/images/bg.png");
    background-position: center; // 背景图片的位置
    background-size: 100% 100%;    // 背景图片大小
    background-repeat: no-repeat;// 背景图片平铺
  }
  h1 {
    text-align: center;
  }
  .content {
    // 本身已经是弹性盒子
    justify-content: center;  // 元素在主轴上居中
    align-items: center;  // 元素在交叉轴上居中
    .content-body {
      flex: 0 0 600px;
      background-color: rgba(245, 116, 155, 0.15);
      border: solid 2px pink;
      box-shadow: 10px 10px 15px pink;
    }
  }
  .slogan {
    text-align: right;
    line-height: 60px;
    font-size: 26px;
    letter-spacing: 0.5em; // 字间距
    margin-right: 30px;
  }

</style>

